<template>
  <view>
    <view class="top-banner">
      <!-- 渐变标题 -->
      <view class="wrap-item-top-left">
        <view class="title">
          全屋14件套
        </view>
        <u-swiper :list="lunboList" height="220"></u-swiper>
      </view>
    </view>
    <!-- 价格区 -->
    <view class="wrap-item-price">
      <view class="wrap-item-price-left">
        ¥{{suitDetail.subject.suitPrice}}
      </view>
      <view class="wrap-item-price-right">
        <view class="small-text">
          <uni-icons type="fire" size="15"></uni-icons> 2333
        </view>
        <view class="small-text">
          <uni-icons type="heart-filled" size="15"></uni-icons> {{suitDetail.subject.suitSales}}
        </view>
      </view>
    </view>
    <!-- 标题区 -->
    <view class="main-title">
      {{suitDetail.subject.suitName}}
    </view>
    <!-- 描述区 -->
    <view class="main-desc">
      {{suitDetail.subject.suitIntroduce}}
    </view>
    <!-- 套装商品区 -->
    <view class="body-title">
      套装商品
    </view>
    <!-- 套装商品详情区 -->
    <u-grid :border="true" @click="click">
      <u-grid-item v-for="(baseListItem,baseListIndex) in suitDetail.details" :key="baseListIndex">
        <view class="grid-picture">
          <img :src="imgPrefixAddress + baseListItem.goodsPreviews.split(',')[0]">
        </view>
        <text class="grid-text">{{baseListItem.goodsName}}</text>
      </u-grid-item>
    </u-grid>
    <!--  -->
    <!-- 筛选 -->
    <!-- <view class="shaixuan">
      <view class="left">
        风格<uni-icons type="top"></uni-icons>
      </view>
      <view class="right">
        价格<uni-icons type="bottom"></uni-icons>
      </view>
    </view> -->
    <!-- 六张大图区 -->
    <view class="big-img-six" v-for="(item,index) in lunboList" :key="index">
      <img :src="item" alt="">
    </view>

    <!-- 商品介绍详情 -->
    <!-- <view class="goods-detail">
      <view class="left">
        <img src="@/static/goodsDetail/good-detail.jpg" alt="">
      </view>
      <view class="right">
        <view class="text-title">
          质保2年
        </view>
        <view class="text-main">
          般嘉洛尔售卖商品质保两年
          因家具行业特殊性，
          不接受客户无理由退换货，
          还请谅解
        </view>
      </view>
    </view> -->
    <!-- 供应商资质审核 -->
    <!-- <view class="qualification-audit">
      <view class="title">
        <text class="title1">供应商</text>
        <text class="title2">资质审核</text>
      </view>
      <view class="content">
        <img src="@/static/goodsDetail/goods-detail.jpg" alt="">
      </view>
    </view> -->
    <!-- 第三方权威质检 -->
    <!-- <view class="three-check">
      <view class="title">
        <text class="title1">第三方</text>
        <text class="title2">权威质检</text>
      </view>
      <view class="desc">
        为保证家具品质质量，抱着对消费者负责的态度，每家工厂我们都安排专业人士前往考察核实，做出详细的评估
      </view>
      <view class="pic">
        <img src="" alt="">
      </view>
    </view> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        suitDetail: '',
        lunboList: []
      };

    },
    methods: {
      async getSuitDetail() {
        const res = await uni.$http.get('/apt/suit/details/4')
        if (res.data.code !== 200) return uni.$showMsg('获取套装详情失败，请重试')
        console.log(res);
        this.suitDetail = res.data.data
        let arr = []
        let newArr = []
        arr = res.data.data.subject.suitPicture.split(',')
        arr.forEach(item => {
          newArr.push(this.imgPrefixAddress + item)
        })
        this.lunboList = newArr
      }
    },
    onLoad(id) {
      this.getSuitDetail(id.suitId)
    }
  }
</script>

<style lang="scss">
  .top-banner {
    width: 100%;
    height: 500rpx;

    .wrap-item-top-left {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 5px;

      image {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }

      .title {
        width: 80px;
        height: 20px;
        background: linear-gradient(90deg, #FFD37C 0%, #CE993D 69%);
        font-size: 11px;
        color: #FFFFFF;
        border-radius: 4px 0px 20px 0px;
        position: absolute;
        text-align: center;
      }
    }
  }

  // 价格区
  .wrap-item-price {
    margin-top: 20rpx;
    display: flex;
    margin-left: 25px;
    width: 330px;
    justify-content: space-between;

    .wrap-item-price-left {
      font-size: 18px;
      color: #A50000;
    }

    .wrap-item-price-right {
      font-size: 11px;
      height: 25px;
      width: 100px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40rpx;

      .small-text {
        padding-top: 3px;
      }
    }
  }

  // 主要标题区
  .main-title {
    width: 334px;
    height: 18px;
    margin: 0 auto;
    line-height: 18px;
    text-align: left;
    color: #141414;
    font-size: 18px;
  }

  // 主要描述区
  .main-desc {
    width: 345px;
    color: #66737F;
    font-size: 12px;
    margin: 30rpx auto;
  }

  // 套装主体内容区
  .body-title {
    margin: 30px 0 30px 15px;
    width: 85px;
    height: 20px;
    padding: 0 8px;
    line-height: 20px;
    color: #000000;
    font-size: 18px;
    border-left: 3px solid #A50000;
  }

  .grid-text {
    font-size: 14px;
    color: #141414;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }

  .grid-picture {
    margin-top: 20rpx;
    width: 88px;
    height: 70px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  // 筛选
  .shaixuan {
    width: 300px;
    height: 50rpx;
    margin: 0 auto;
    display: flex;

    view {
      color: #66737F;
      font-size: 14px;
      width: 160px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .left {
      border-right: 1px solid #d8d8d8;
    }

    .right {}

  }

  // 六个大图区
  .big-img-six {
    width: 100%;
    height: 210px;
    margin: 20rpx 0;


    img {
      width: 100%;
      height: 100%;
    }
  }

  // 商品介绍详情
  .goods-detail {
    width: 100%;
    height: 220px;
    display: flex;

    .left {
      width: 40%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      width: 60%;
      height: 100%;
      background-color: #c1a032;
      position: relative;

      .text-title {
        font-size: 24px;
        color: #fff8f8;
        position: absolute;
        top: 32px;
        left: 20px;
      }

      .text-main {
        position: absolute;
        top: 102px;
        left: 20px;
        width: 172px;
        height: 80px;
        font-size: 14px;
        color: #FFFFFF;
      }
    }
  }

  // 供应商资质审核
  .qualification-audit {
    margin: 30px 0;

    .title {
      width: 144px;
      height: 32px;
      margin: 30rpx auto;

      .title1 {
        font-size: 24px;
        color: #3D3D3D;
      }

      .title2 {
        font-size: 18px;
        color: #3D3D3D;
      }
    }

    .content {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }

  // 第三方权威质检 
  .three-check {
    margin: 20px 0;

    .title {
      width: 154px;
      height: 32px;
      margin: 30rpx auto;

      .title2 {
        font-size: 24px;
        color: #3D3D3D;
      }

      .title1 {
        font-size: 18px;
        color: #3D3D3D;
      }
    }

    .desc {
      width: 345px;
      height: 34px;
      margin: 0 auto;
      text-align: center;
      font-size: 12px;
      color: #3d3d3d;
    }
  }
</style>